<template>
  <el-table :data="orderList" stripe border>

    <!-- 索引列 -->
    <el-table-column type="index" label="💎" align="center"></el-table-column>

    <!-- 订单编号 -->
    <el-table-column label="订单编号📞" align="center" prop="order_number" />

    <!-- 订单价格 -->
    <el-table-column label="订单价格🎱" align="center" prop="order_price" width="100px"/>
    
    <!-- 是否付款 -->
    <el-table-column label="是否付款✅" align="center" prop="pay_status" width="100px">
      <template v-slot="data">
        <el-tag v-if="data.row.pay_status === '0'" type="danger">未付款</el-tag>
        <el-tag v-if="data.row.pay_status === '1'">已付款</el-tag>
      </template>
    </el-table-column>

    <!-- 是否发货 -->
    <el-table-column label="是否发货⌛" align="center" prop="is_send" width="100px"/>

    <!-- 下单时间 -->
    <el-table-column label="下单时间🕛" align="center" prop="create_time" width="200px">
      <template v-slot="data">
        {{ data.row.create_time | timerFormat }}
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作😀" align="center" width="200px">
      <template v-slot="data">
        <div>
          <span v-if="!data.row">测试</span>
          <el-button-com icon="el-icon-edit" size="mini" @click.native="openEidtDialog"/>
          <el-button-com icon="el-icon-location" btnType="success" size="mini" 
          @click.native="openLoactionDialog"/>
        </div>
      </template>
    </el-table-column>

  </el-table>
</template>
<script>
// 组件
  import ElButtonCom from '@/components/common/ElButtonCom';

export default {
  props: {
    orderList: Array
  },
  methods: {
    openEidtDialog() { // 开启编辑dialog
      this.$bus.$emit('openEidtDialog');
    },
    openLoactionDialog() { // 打开locationDialog
      this.$bus.$emit('openLocationDialog');
    }
  },
  components: {
    ElButtonCom
  }
}
</script>

<style lang="scss" scoped>
  .el-table {
    margin-top: 20px;
  }
</style>